import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,Table,Button,TreeSelect,  Popconfirm,Row,Col,} from 'antd';
var _this,_props,_state;

const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;

class ShowShelfDownDetailModal extends Component {
  constructor(props) {
    super(props);
  }
 // 点击保存将state里的选中的值放到回显给父级页面上
 okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
      }
    });
};
  render() {
    const { children, dispatch,viewDetailList,item,editDetailHandler,addDetailHandler } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout2 = {
      labelCol: { span: 7 },
      wrapperCol: { span: 16 },
    }; 
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14  },
    };
    const columns = [{
        fixed: 'left',
        title: '资产编号',
        dataIndex: 'assetNo',
        key: 'assetNo',
        width: 120
      },{
        title: '资产分类',
        dataIndex: 'typeName',
        key: 'typeName',
        width: 100
      },{
        title: '设备名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 120
      },{
        title: '品牌',
        dataIndex: 'brandName',
        key: 'brandName',
        width: 100,
      },{
        title: '设备型号',
        dataIndex: 'modelName',
        key: 'modelName',
        width: 100,
      },{
        title: '设备序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 100,
      },{
        title: 'RFID编码',
        dataIndex: 'rfidNo',
        key: 'rfidNo',
        width: 100,
      },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 70,
        render: (value, row, index) => {
          return (
               value==1?"已下架":value==2?"未下架":''
           )
       }
      },{
        title: '所在机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 100,
      },{
        title: '所在机柜',
        dataIndex: 'rackName',
        key: 'rackName',
        width: 100,
      },{
        title: '起始U位',
        dataIndex: 'startU',
        key: 'startU',
        width: 60,
      },{
        title: '购置时间',
        dataIndex: 'buyTime',
        key: 'buyTime',
        width: 120,
      },{
        title: '维保结束日期',
        dataIndex: 'expirationTime',
        key: 'expirationTime',
        width: 120,
      }
      ];

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                width={1000}
                visible={this.props.visible}
                onOk={this.okHandler.bind(this)}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
         <div style={{backgroundColor:'#fff',marginTop: '-15px'}}>
            <div style={{}}>
            <div style={{width:'100%',backgroundColor:'#fff',paddingLeft:'20px'}}>
                <Form layout={'inline'} style={{marginTop: '0px'}}>
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('detailList',{initialValue:viewDetailList})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>

                     <Row gutter={4}>
                      <Col span={6}>
                        <FormItem
                            label="下架单号"
                            {...formItemLayout2}
                          >
                          {
                            getFieldDecorator('id', {
                              initialValue: item.id_,
                            })(<Input readOnly="readonly" style={{ width: '160px' }} />)
                          }
                        </FormItem>
                      </Col>
                      <Col span={6}>
                        <FormItem
                              label="机房"
                              {...formItemLayout2}
                            >
                            {getFieldDecorator('roomName', {
                                initialValue: item.roomName,
                              })(<Input readOnly="readonly" style={{ width: '170px' }} />)}
                        </FormItem>
                      </Col>

                      <Col span={5}>
                        <FormItem
                              label="操作人"
                              {...formItemLayout2}
                            >
                            {getFieldDecorator('userName', {
                                initialValue: item.userName,
                              })(<Input readOnly="readonly" style={{ width: '140px' }} />)}
                        </FormItem>
                      </Col>
                      <Col span={7}>
                         <FormItem
                              label="预计执行时间"
                              {...formItemLayout}
                            >
                            {
                              getFieldDecorator('execute_time', {
                                initialValue: item.executeTime,
                              })( <Input readOnly="readonly" style={{ width: '152px' }}/>)
                            }
                        </FormItem>
                      </Col>
                    </Row>

                    <Row style={{marginTop:'20px'}}>
                      <Col span={24}>
                          <FormItem
                                label="下架备注"
                                hasFeedback
                              >
                              {
                                getFieldDecorator('remark', {
                                 initialValue: item.remark,
                                })(<Input style={{ width: '865px' }} type="textarea" autosize={{ minRows: 3, maxRows: 3 }}/>)
                              }
                          </FormItem>
                      </Col>
                    </Row>
                    <Row style={{marginTop:'20px',marginBottom:'10px'}}>
                      <Col span={24}>
                      <hr style={{width:'926px',height:'0px',borderTop:'1px solid #e9e9e9',borderRight:'0px',borderBottom:'0px',borderLeft:'0px'}} />
                      </Col>
                    </Row>
                    <div style={{}}>
                        <div style={{width:'100%',padding:"10px 20px 20px",}}>
                              <Table columns={columns}
                                  rowKey={record => record.detailId}
                                  dataSource={viewDetailList}
                                  pagination={false}
                                  scroll={{ x: 1630 }}
                            />
                        </div>
                    </div>
             </Form>
            </div>
            </div>
        </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(ShowShelfDownDetailModal)
